<template>
  <div class="detail">
    <detail-nav-bar
      class="detail-nav-bar"
      :titles="titles"
      @titleClick="titleClick"
      ref="navbar"
    />
    <scroll
      class="scrollcontent"
      :probeType="3"
      @scroll="contentScroll"
      :pullUpLoad="true"
      ref="scrollview"
    >
    
      <detail-swiper class="detail-swiper" :topImages="topImages" />
      <detail-title :goodsInfo="goodsInfo" />
      <detail-shop-info class="detail-shop-info" :shopInfo="shopInfo" />
      <detail-image-info
        ref="imageinfo"
        :detail-info="detailInfo"
        @imgsloaded="imgsloaded"
      />
      <detail-params-info ref="paramsinfo" :params-info="paramsInfo" />
      <detail-commont-info ref="commontinfo" :rate="rate" />
      <goods-list class="goodsList" ref="recommend" :goods="recommends" />
    </scroll>
    <back-top @click.native="backClick" v-show="isShowBackTop" />
    <detail-bottom-bar class="bottom-bar" @addCart='addCart' />
    <!-- <toast ref='toast'></toast> -->
  </div>
</template>

<script>
import {
  getDetailInfo,
  Goods,
  ShopInfo,
  DetailInfo,
  Recommend,
} from "network/detail";
import DetailNavBar from "./childComps/DetailNavBar";
import DetailSwiper from "./childComps/DetailSwiper";
import DetailTitle from "./childComps/DetailTitle";
import DetailShopInfo from "./childComps/DetailShopInfo";
import DetailImageInfo from "./childComps/DetailImageInfo";
import DetailParamsInfo from "./childComps/DetailParamsInfo.vue";
import Scroll from "components/common/scroll/Scroll";
import DetailCommontInfo from "./childComps/DetailCommontInfo.vue";
import GoodsList from "components/content/goods/GoodsList.vue";

import { mixins , backTopMixin} from "common/mixin";
import { debounce } from "common/utils";
import DetailBottomBar from "./childComps/DetailBottomBar.vue";
import { StorageFn } from 'common/storage'
import { mapGetters } from 'vuex'
// import Toast from '../../components/common/toast/Toast.vue';
export default {
  name: "Detail",
  data() {
    return {
      iid: null,
      titles: ["商品", "参数", "评论", "推荐"],
      topImages: [],
      goodsInfo: {},
      shopInfo: {},
      detailInfo: {},
      imginfo: {},
      paramsInfo: {},
      rate: {},
      recommends: [],
      themeTopYs: [],
      getThemeTopY: null,
      scrollTopY: 0,
      currentIndex: 0,
      isShowToast:false,
      message: '',
      refresh:null,
      storage:null
    };
  },
  async created() {
    this.iid = this.$route.params.iid;
    this.storage = new StorageFn()
    // console.log(this.$route)
    await getDetailInfo(this.iid).then((res) => {
      console.log(res);
      let data = res.result;
      this.topImages = data.itemInfo.topImages;
      this.goodsInfo = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      // this.detailInfo = data.detailInfo
      this.shopInfo = new ShopInfo(data.shopInfo, data.detailInfo);
      this.detailInfo = new DetailInfo(data.detailInfo);
      this.paramsInfo = data.itemParams;
      this.rate = data.rate.list[0];
    });
    Recommend().then((res) => {
      console.log(res);
      this.recommends = res.data.list;
    });
    this.$bus.$on('imgLoaded',this.itemImgsListen)
    // this.getThemeTopY = debounce(() => {
    //   this.themeTopYs= []
    //   this.themeTopYs.push(0);
    //   this.themeTopYs.push(this.$refs.paramsinfo.$el.offsetTop);
    //   this.themeTopYs.push(this.$refs.commontinfo.$el.offsetTop);
    //   this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
    //   console.log(this.themeTopYs)
    // }, 200);
  },
  methods: {
    contentScroll(position) {
      // console.log(position);
      let scrollTopY = -position.y;
      let length = this.themeTopYs.length;
      for (let i = 0; i < length - 1; i++) {
        if (
          this.currentIndex !== i &&
          scrollTopY > this.themeTopYs[i] &&
          scrollTopY < this.themeTopYs[i + 1]
        ) {
          this.currentIndex = i;
          this.$refs.navbar.currentIndex = this.currentIndex;
        }
      }
      // if (this.scrollTopY < this.themeTopYs[1]) {
      //   this.$refs.navbar.currentIndex = 0;
      // } else if (
      //   this.scrollTopY >= this.themeTopYs[1] &&
      //   this.scrollTopY < this.themeTopYs[2]
      // ) {
      //   this.$refs.navbar.currentIndex = 1;
      // } else if (
      //   this.scrollTopY >= this.themeTopYs[2] &&
      //   this.scrollTopY < this.themeTopYs[3]
      // ) {
      //   this.$refs.navbar.currentIndex = 2;
      // } else {
      //   this.$refs.navbar.currentIndex = 3;
      // }
      this.listenShowBackTop(position)
      // this.isShowTabControl = -position.y >= this.tabControlOffsetTop
      // if(-position.y >= this.tabControlOffsetTop) {
      //   this.isShowTabControl = true
      // } else {
      //   this.isShowTabControl = false
      // }
    },
    scrollPullingUp() {
      this.getHomeGoods(this.currentType);
    },
    imgsloaded() {
      if(this.refresh){this.refresh()}
      // console.log("详情页图片一刷新");
      // this.$refs.scrollview.scrollRefresh();
      this.themeTopYs = [];
      this.themeTopYs.push(0);
      this.themeTopYs.push(this.$refs.paramsinfo.$el.offsetTop);
      this.themeTopYs.push(this.$refs.commontinfo.$el.offsetTop);
      this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
      this.themeTopYs.push(Number.MAX_VALUE);
      // console.log(this.themeTopYs);
      // this.getThemeTopY()
    },
    titleClick(index) {
      console.log(index);
      this.$refs.scrollview.scrollTo(0, -this.themeTopYs[index], 500);
    },
    backClick() {
      this.$refs.scrollview.scrollTo(0, 0, 500);
    },
    addCart(){
      // console.log(this.goodsInfo)
      // console.log(this.shopInfo)
      // console.log(this.detailInfo)
      let goodsItem = {}
      goodsItem.title = this.goodsInfo.title || '';
      goodsItem.desc = this.goodsInfo.desc || '';
      goodsItem.price = this.goodsInfo.price || '';
      // goodsItem.count = 1
      goodsItem.img = this.detailInfo.detailImage[0].list[0]
      goodsItem.iid = this.iid
      goodsItem.checked = true
      goodsItem.count = 1
      // console.log(goodsItem)
      this.$store.dispatch('addCart',goodsItem).then(res=>{
        // this.message = res;
        // this.isShowToast = true
        // console.log(this.message)
        // this.$refs.toast.show(res,5000)
        this.storage.setLocal('cartList',this.$store.getters.getCartList)
        console.log(this.$toast)
        this.$toast.show(res, 1000)
      })
    }
  },
  mounted() {
    this.refresh = debounce(this.$refs.scrollview.scrollRefresh,500)
  },
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailTitle,
    DetailShopInfo,
    DetailImageInfo,
    DetailParamsInfo,
    DetailCommontInfo,
    GoodsList,
    Scroll,
    DetailBottomBar,
    // Toast,
    
  },
  computed:{
    ...mapGetters(['getCartList'])
  },

  mixins: [mixins,backTopMixin],
  destroyed() {
    this.$bus.$off("imgLoaded", this.itemImgsListen);
  },
};
</script>

<style scoped>
.detail {
  position: relative;
  z-index: 10;
  background-color: #fff;
}
.detail-nav-bar {
  font-size: 14px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 10;
  width: 100vw;
}
.scrollcontent {
  position: fixed;
  top: 49px;
  bottom: 70px;
  left: 0;
  right: 0;
  overflow: hidden;
  padding-bottom: 70px;
  box-sizing: border-box;
  background-color: #fff;
  /* z-index: 10; */
  /* height: calc(100% - 98px);
  overflow: hidden;
  margin-top: 49px;
  margin-bottom: 49px; */
}
.detail-swiper {
  height: 300px;
  overflow: hidden;
}
.detail-shop-info {
  border-bottom: 5px solid #fafafa;
}
.goodsList {
  padding-bottom: 20px;
  box-sizing: border-box;
}
.bottom-bar {
  height: 70px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  z-index: 100;
  width: 100%;
}
</style>